<template>
  <div class="posterRecord">
    <div class="posterRecordLeft">
      <div class="organTit">
        <h3>组织架构</h3>
      </div>
      <Tree :data="treeList" @on-select-change="treeChange" class="demo-tree-render"
        :render="renderContent"></Tree>
      <div class="tree"></div>
    </div>
    <div class="posterRecordRight">
      <article-management ref="ArticleManagement" />
    </div>
  </div>
</template>

<script>
  import reportMgr from '@/biz/report/report'
  import importApi from '@/biz/article/importArticle'

  import ArticleManagement from '../../casemanagement/marketingCenter/importArticleManagement/index'
  export default {
    components: { ArticleManagement },
    data() {
      return {
        treeList: [],
        orgEndId: '',
      }
    },

    methods: {
      // 自定义当前节点渲染内容
      renderContent(h, { data }) {
        return h('span', `${data.orgEndName} (${data.num})`)
      },
      getPosterList(orgEndId) {
        this.$refs.ArticleManagement.init(orgEndId)
      },
      //获取部门列表
      getDepartmentList() {
        let params = {}
        importApi.selectImportArticleUserOrg(params).then((res) => {
          res[0].selected = true
          res[0].expand = true
          this.treeList = res
          this.orgEndId = this.treeList[0].orgEndId
          this.getPosterList(this.orgEndId)
        })
      },
      treeChange(event) {
        if (!event.length) {
          this.$Message.info('请先选择一个组织架构！')
          return false
        }
        if (event[0].orgEndId) {
          this.orgEndId = event[0].orgEndId
        }
        this.getPosterList(this.orgEndId)
      },
    },
    created() {
      this.getDepartmentList()
    },
    mounted() {},
  }
</script>
<style lang='scss' scoped>
  .posterRecord {
    padding: 20px;
    height: 100%;
    width: 100%;
    display: flex;

    .posterRecordLeft {
      flex: 0 0 230px;
      padding: 0 10px;
      height: 100%;
      border: 1px solid #ccc;
      margin-right: 20px;
      border-radius: 8px;
      max-height: 100%;
      overflow-y: auto;

      .tree {
        margin-top: 30px;
      }

      .organTit {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding: 15px 0px;
      }
    }

    .posterRecordRight {
      width: calc(100% - 320px);
      flex: 1;
      // height: 100%;
      // width: 100%;
      border: 1px solid #ccc;
      border-radius: 8px;
    }

    ::v-deep .ivu-tree-title {
      width: calc(100% - 15px);
    }
  }
</style>